<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>订单详情</span></div>
      <div class="seed_page_tool"></div>
    </div>
    <div class="seed_odetaile_body">
      <!--头部-->
      <div class="seed_odetaile_head">
        <!--图片数量价格-->
        <div class="seed_list_second_cboxa" v-for="(goods ,index) in list.extend_order_goods">
          <div class="show-img">
            <img v-bind:src="website+'/'+goods.goods_image" @load="successLoadImg" @error="errorLoadImg">
          </div>
          <div class="seed_list_second_cbox_r">
            <span class="seed_list_second_cbox_r_t">{{goods.goods_name}}</span>
            <div class="seed_list_second_cbox_b">
              <div class="seed_list_second_cbox_b_l">
                <span>￥</span>
                <u>{{goods.goods_price}}</u>
              </div>
              <div class="seed_list_second_cbox_b_r">
                <span>x</span>
                <u>{{goods.goods_number}}</u>
              </div>
            </div>
          </div>
        </div>
        <div class="seed_odetaile_h_b">
          <div>
            <span>商品金额</span>
            <u>￥{{list.goods_amount}}</u>
          </div>
          <div>
            <span>会员折扣</span>
            <u>￥{{list.discount_amount}}</u>
          </div>
          <div>
            <span>运费</span>
            <u>￥{{list.shipping_fee}}</u>
          </div>
          <div class="seed_odetaile_h_b_l">
            <span>订单金额</span>
            <u class="seed_odetaile_h_b_a">￥{{list.order_amount}}</u>
          </div>
        </div>
      </div>
      <!--订单信息-->
      <div class="seed_odetaile_z">
        <div class="seed_odetaile_message">
          <div class="seed_odetaile_message_h">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>来源小程序:种子应用</span>
            </div>
          </div>
          <div class="seed_odetaile_message_c">
            <p>订单编号：</p>
            <span>{{list.order_sn}}</span>
          </div>
          <div class="seed_odetaile_message_c">
            <p>支付单号：</p>
            <span>{{list.pay_sn}}</span>
          </div>
          <div class="seed_odetaile_message_c">
            <p>下单时间：</p>
            <span>{{date}}</span>
          </div>
          <div class="seed_odetaile_message_c">
            <p>收货人：</p>
            <span>{{list.extend_order_common.receiver_name}}</span>
            <u>{{list.receiver_info.mobile}}</u>
          </div>
          <div class="seed_odetaile_message_c">
            <p>收货地址：</p>
            <span>{{list.receiver_info.address}}</span>
          </div>
        </div>
      </div>
      <!--根据条件判断显示接下来的所有内容-->
      <!--待发货-->
      <div v-if="list.order_state==='待发货'&status===undefined">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>待发货</span>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p><span>注：</span>买家已使用“在线付款”方式成功对订单进行支付，订单号{{list.order_sn}}订单已提交商家进行备货发货准备。</p>
          </div>
          <!--买家留言-->
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>买家留言</p>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p class="seed_odetaile_status_d_l">{{list.extend_order_common.order_message}}</p>
          </div>
        </div>
        <!--发货设置-->
        <router-link :to="{name:'order-send', params: {id: oid, d_tab: tab}}">
          <button class="seed_odetaile_status_button" >发货设置</button>
        </router-link>
      </div>
      <!--已发货-->
      <div v-if="list.order_state==='已发货' && status!==1">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>已发货</span>
              <!--<span style="margin-left: 1rem">查看物流</span>-->
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <div>
              <h2>{{list.e_name}}</h2>
              <h3>物流单号：{{list.extend_order_common.shipping_sn}}</h3>
            </div>
          </div>
          <!--买家留言-->
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>买家留言</p>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p class="seed_odetaile_status_d_l">{{list.extend_order_common.order_message}}</p>
          </div>
        </div>
      </div>
      <!--订单核销待发货-->
      <div v-if="list.order_state==='待发货'&status===1">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>待发货</span>
            </div>
          </div>
          <div class="seed_odetaile_status_d" v-if="list.status >= 30 && list.is_self_fetch === 0 && list.extend_order_common.is_shop_self_send === 0">
            <div>
              <h2>{{list.e_name}}</h2>
              <h3>物流单号：{{list.extend_order_common.shipping_sn}}</h3>
            </div>
          </div>
          <!--买家留言-->
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>买家留言</p>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p class="seed_odetaile_status_d_l">{{list.extend_order_common.order_message}}</p>
          </div>
        </div>
        <!--发货设置-->
        <div v-if="is===1||is===undefined">
          <button class="seed_odetaile_status_button" @click=" popUp(list.order_id)">订单核销</button>
        </div>
        <div v-else>
          <button class="seed_odetaile_status_buttons seed_odetaile_status_buttons_al">订单已核销</button>
        </div>
      </div>
      <!--订单核销已发货-->
      <div v-if="list.order_state==='已发货' && status===1">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>已发货</span>
            </div>
          </div>
          <div class="seed_odetaile_status_d" v-if="list.status >= 30 && list.is_self_fetch === 0 && list.extend_order_common.is_shop_self_send === 0">
            <div>
              <h2>{{list.e_name}}</h2>
              <h3>物流单号：{{list.extend_order_common.shipping_sn}}</h3>
            </div>
          </div>
          <!--买家留言-->
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>买家留言</p>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p class="seed_odetaile_status_d_l">{{list.extend_order_common.order_message}}</p>
          </div>
        </div>
        <!--发货设置-->
        <button class="seed_odetaile_status_button" @click=" popUp(list.order_id)">订单核销</button>
      </div>
      <!--已完成-->
      <div v-if="list.order_state==='已完成'">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>已完成</span>
              <!--<router-link class="seed_odetaile_status_ckwl" :to="{name:'order-logistics',params:{id: list.order_id}}">查看物流</router-link>-->
            </div>
          </div>
          <div class="seed_odetaile_status_d" v-if="list.status >= 30 && list.is_self_fetch === 0 && list.extend_order_common.is_shop_self_send === 0">
            <div>
              <h2>{{list.e_name}}</h2>
              <h3>物流单号：{{list.extend_order_common.shipping_sn}}</h3>
            </div>
            <p><span>注：</span>买家已确立收货，交易完成</p>
          </div>
          <!--买家留言-->
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>买家留言</p>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p class="seed_odetaile_status_d_l">{{list.extend_order_common.order_message}}</p>
          </div>
        </div>
      </div>
      <!--待付款-->
      <div v-if="list.order_state==='未付款'">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>待付款</span>
            </div>
          </div>
          <!--买家留言-->
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>买家留言</p>
            </div>
          </div>
          <div class="seed_odetaile_status_d">
            <p class="seed_odetaile_status_d_l">{{list.extend_order_common.order_message}}</p>
          </div>
        </div>
        <!--按钮-->
        <button class="seed_odetaile_status_button" @click="cancelOrder(list.order_id,list.order_message)">取消订单</button>
      </div>
      <!--已取消-->
      <div v-if="list.order_state==='已取消'">
        <div class="seed_odetaile_z">
          <div class="seed_odetaile_status">
            <div>
              <u></u>
              <p>订单信息</p>
              <span>已取消</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      oid: '',
      list: {extend_order_common: {}, receiver_info: {}},
      date: '',
      website: '',
      status: '',
      is: '',
      tab: 0,
      c_tab: 0
    }
  },
  created () {
    this.is = this.$route.params.is
    this.oid = this.$route.params.id
    this.status = this.$route.params.status
    this.tab = this.$route.params.tab
    this.c_tab = this.$route.params.c_tab
    this.getDetail()
  },

  methods: {
    back () {
      if (this.c_tab !== undefined && this.c_tab >= 0) {
        this.$router.push({name: 'verification-list', params: {tab: this.$route.params.c_tab}})
      } else {
        this.$router.push({name: 'order-list', params: {tab: this.$route.params.tab}})
      }
    },
    getDetail () {
      this.$request.orderInfo(this.oid).then(data => {
        this.list = data.order_info
        this.website = data.website
        this.date = this.timestampToTime(data.order_info.add_time)
        console.log(data.order_info)
      })
    },
    cancelOrder (id, msg) {
      let param = {
        order_id: id,
        msg: msg
      }
      this.$MessageBox.confirm('是否取消该订单?').then(action => {
        this.$request.cancelOrder(param).then(data => {
          this.$toast('取消成功')
          this.back()
        })
      })
    },
    popUp (id) {
      this.$MessageBox.confirm('是否核销该订单?').then(action => {
        this.$request.fetch(id).then(data => {
          this.$toast('核销成功')
          this.back()
        })
      })
    },
    timestampToTime (timestamp) {
      var date = new Date(timestamp * 1000), // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-',
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
        D = date.getDate() + ' ',
        h = date.getHours() + ':',
        m = date.getMinutes() + ':',
        s = date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>
